<template>
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard
        :border="false"
        :isright="true"
        :style="{ 'margin-bottom': padding }"
        title="编辑中心"
        :topTitleLeft="true"
      >
        <template #right>
          <!-- <el-select
            style="margin-right: 200px"
            v-model="value"
            @change="statusChange"
            placeholder="请选择"
          >
          
            <el-option label="待整理" value="edit"> </el-option>
            <el-option label="已上架" value="hasBeenOn"> </el-option>
            <el-option label="已下架" value="down"> </el-option>
          </el-select> -->

          <ComForm
            @EventChange="ChangeFn"
            @EventReset="reset"
            :list="comForm"
            @EventOnsubmit="inquireFn"
          ></ComForm>
        </template>
      </NewCard>

      <div class="content-box">
        <NewCard :isright="true" title="内容" class="table">
          <template #right>
            <el-popover placement="bottom" width="200" trigger="click">
              <div @click="add('top')">政策</div>
              <div @click="add('qa')">问答</div>
            </el-popover>
          </template>
          <div>
            <ComTable
              @Eventdblclick="dbClickFn"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              :pagination="{
                total: pageing.total,
                pageNum: pageing.pageNum,
                pageSize: pageing.pageSize,
              }"
              :list="tableList"
              :modes="tableModes"
            >
              <el-table-column
                #default="{ row }"
                align="left"
                width="100"
                label="操作"
              >
                <template v-if="row.status == 5">
                  <!-- "
              $router.push({
                path: '/contentPlatform/laws/laws-details',
                query: row,
              })
            " -->
                  <!-- v-hasPermi="['base:docModule:list']" -->
                  <el-button
                    size="mini"
                    @click="getDownOrUp(4, row)"
                    type="primary"
                    >上架</el-button
                  >
                </template>
              </el-table-column>
            </ComTable>
          </div>
        </NewCard>
      </div>

      <!-- 修改内容定价 end-->
    </div>
    <Comdrawer
      size="60%"
      :title="drawerTitle"
      @eventColse="handleClose"
      :drawer="drawer"
    >
      <template #title>
        <el-button-group>
          <el-button
            @click="submit"
            type="primary"
            v-show="idType == 1 && canEdit"
            size="mini"
            plain
            >提交</el-button
          >
          <el-button
            type="primary"
            v-show="isDown"
            size="mini"
            @click="getDownOrUp(5)"
            >下架</el-button
          >
          <!-- <el-button type="primary" plain>上架</el-button> -->
        </el-button-group>
      </template>
      <Law ref="law" :data="dataObject" v-if="idType == 1"></Law>
      <Top :data="dataObject" v-else-if="idType == 2"></Top>
      <Qa :data="dataObject" v-else></Qa>
      <el-row type="flex" justify="end" class="row-bg" style="margin-top: 30px">
      </el-row>
    </Comdrawer>
  </main>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";
import { getLawListApi, getLawInfoApi } from "@/wss/newApi_3-24/doc/law.js";
import ComSelect from "../../../components/comSelect.vue";

import ComTable from "../../../components/comTable.vue";
import ComForm from "../../../components/comForm.vue";
import NewCard from "../../../components/newCard.vue";
import { changeType, getfilterParams, changeLawType } from "@/wss/utils/wss.js";
import Law from "./law.vue";
import Top from "./top.vue";
import Qa from "./qa.vue";
import Comdrawer from "../../../components/Comdrawer.vue";
import {
  getLawEditApi,
  getLawUpdateStatusApi,
} from "@/wss/newApi_3-24/doc/law.js";
import {
  getTopUpdateStatusApi,
  getTopListApi,
  getTopGetInfoInfoApi,
} from "@/wss/newApi_3-24/doc/top.js";

import {
  getQaListApi,
  getQaGetInfoApi,
  getQaUpdateStatusApi,
} from "@/wss/newApi_3-24/doc/qa.js";

export default {
  components: {
    ComTable,
    ComForm,
    NewCard,
    ComSelect,
    Law,
    Top,
    Qa,
    Comdrawer,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") return callback(new Error("年龄不能为空"));
      value = Number(value);

      if (typeof value == "number") {
        if (value <= 1 && value >= 0) return callback();
      }
      callback(new Error("年龄不能为空"));
    };
    return {
      drawer: false,
      direction: "rtl",

      value: "",
      padding: padding,
      // 标记第一次过滤
      isFirst: true,
      // 查看对话框
      lookDialogVisible: false,
      isFailtrueFilter: false, //是否过滤失败筛选
      // 保存切换失败和正常筛选的数组
      tempFilterArr: [],
      // 类型数组
      typeArr: [],
      dialogVisible: false,
      // 是否再次过滤筛选条件
      isFilter: true,
      // 表格配置
      config: {
        quanxian: "work:crawler:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 10, status: 0, type1: "law" },
      // 失败和成功状态
      currentStatus: "1",
      // 运行中的数量
      operation: 0,
      activeName: "first",

      // 没有转换过的数据
      noChangeTableList: [],
      // 表单配置
      comForm: {
        modes: [
          {
            formType: "select",
            mode: "status",

            value: "0",
            select: [
              {
                label: "待整理",
                value: "0",
              },
              {
                label: "上架",
                value: "4",
              },
              {
                label: "下架",
                value: "5",
              },
            ],
          },
          {
            formType: "select",
            mode: "type1",

            value: "law",
            select: [
              {
                label: "政策",
                value: "top",
              },
              {
                label: "问答",
                value: "qa",
              },
              {
                label: "法律",
                value: "law",
              },
            ],
          },
        ],
      },
      // 是否能编辑
      canEdit: true,
      idType: "",
      // 表格数据
      tableList: [],
      // 表格配置
      tableModes: [
        {
          label: "类型",
          mode: "type",
          width: 200,
        },
        {
          label: "标题",
          mode: "title",

          showOverflowTooltip: true,
        },
        {
          width: 200,

          label: "创建时间",
          mode: "createTime",
          showOverflowTooltip: true,

          effectiveStatus: true,
        },
      ],
      isDown: false,
      drawerTitle: "",

      // 当前的状态
      cuurentStatus: "",
      //修改内容定价 提示框显示状态
      dialogFormVisible: false,

      //修改内容定价 标题宽度
      formLabelWidth: "120px",
      dataObject: {},
      currentType: "law",
    };
  },
  created() {
    this.getLawListFn();
  },

  methods: {
    // 上架

    // 下架操作
    async getDownOrUp(status, row) {
      const _this = this;
      let currentType = _this.currentType;
      console.log(_this.dataObject);
      let params = { id: _this.dataObject.id || row.id, status: status };

      let result;
      switch (currentType) {
        case "law":
          result = await getLawUpdateStatusApi(params);
          break;
        case "top":
          result = await getTopUpdateStatusApi(params);
          break;
        case "qa":
          result = await getQaUpdateStatusApi(params);
          break;
      }
      if (result.code != 200) return;
      _this.pageing.status = status;
      switch (currentType) {
        case "law":
          await _this.getLawListFn();
          break;
        case "top":
          await _this.getTopListFn();
          break;
        case "qa":
          await _this.getQaListFn();
          break;
      }
      _this.comForm.modes[0].value = status.toString();
      _this.drawer = false;
      _this.$message({
        type: "success",
        message: result.msg,
      });
    },
    // 筛选条件发生改变
    ChangeFn(value) {
      const _this = this;
      // 为NAN是字符串，就不退出
      if (!Number.isNaN(Number(value))) {
        // 是否显示上架按钮
        value == 0 ? (_this.canEdit = true) : (_this.canEdit = false);
        // 是否显示下架按钮

        value == 4 ? (_this.isDown = true) : (_this.isDown = false);
        return;
      }

      _this.pageing.pageNum = 1;
      _this.pageing.pageSize = 10;
      // 当前的类型
      this.currentType = value;
      if (value != "law") {
        _this.comForm = {
          modes: [
            {
              formType: "select",
              mode: "status",

              value: "4",
              select: [
                {
                  label: "上架",
                  value: "4",
                },
                {
                  label: "下架",
                  value: "5",
                },
              ],
            },
            {
              formType: "select",
              mode: "type1",

              value: value,
              select: [
                {
                  label: "政策",
                  value: "top",
                },
                {
                  label: "问答",
                  value: "qa",
                },
                {
                  label: "法律",
                  value: "law",
                },
              ],
            },
          ],
        };
      } else {
        _this.comForm = {
          modes: [
            {
              formType: "select",
              mode: "status",

              value: "0",
              select: [
                {
                  label: "编辑",
                  value: "0",
                },
                {
                  label: "上架",
                  value: "4",
                },
                {
                  label: "下架",
                  value: "5",
                },
              ],
            },
            {
              formType: "select",
              mode: "type1",

              value: value,
              select: [
                {
                  label: "政策",
                  value: "top",
                },
                {
                  label: "问答",
                  value: "qa",
                },
                {
                  label: "法律",
                  value: "law",
                },
              ],
            },
          ],
        };
      }
    },
    // 获取头条列表数据
    async getTopListFn() {
      const _this = this;
      let { code, data } = await getTopListApi(_this.pageing);
      if (code != 200) return;

      _this.tableList = JSON.parse(JSON.stringify(data.rows));
      _this.pageing.total = data.total;
    },
    // 提交按钮
    async submit() {
      const _this = this;
      let dataObject = _this.dataObject;
      dataObject.files = this.$refs.law.getBase64Fn();
      dataObject.info.forEach((item) => {
        if (item.isSelect) item.status = "2";
      });
      let { code, msg } = await getLawEditApi(_this.dataObject);
      if (code != 200) return;
      _this.$message({
        type: "success",
        message: msg,
      });
      _this.getLawListFn();
      _this.drawer = false;
    },
    // 获取法律列表数据
    async getLawListFn() {
      let { code, data } = await getLawListApi(this.pageing);
      if (code != 200) return;
      let tableList = JSON.parse(JSON.stringify(data)).rows;
      tableList.forEach((item) => {
        item.type = changeLawType(item.type);
      });

      this.pageing.total = data.total;
      this.tableList = tableList;
    },
    // 状态发生改变
    statusChange(status) {
      this.currentStatus = status;
    },
    //   新建
    add(text) {
      switch (text) {
        case "top":
          this.idType = 2;
          text = "政策";

          break;
        case "qa":
          this.idType = 3;
          text = "问答";
          break;
      }
      this.drawer = true;
      this.drawerTitle = `新增-${text}`;
    },
    // 重设
    reset() {
      const _this = this;
      this.pageing = { pageNum: 1, pageSize: 10, total: 0, type1: "law" };
      _this.comForm = {
        modes: [
          {
            formType: "select",
            mode: "status",
            value: "0",
            select: [
              {
                label: "上架",
                value: "4",
              },
              {
                label: "下架",
                value: "2",
              },
              {
                label: "编辑",
                value: "0",
              },
            ],
          },
          {
            formType: "select",
            mode: "type1",

            value: "law",
            select: [
              {
                label: "政策",
                value: "top",
              },
              {
                label: "问答",
                value: "qa",
              },
              {
                label: "法律",
                value: "law",
              },
            ],
          },
        ],
      };
    },

    handleClose() {
      const _this = this;
      _this.drawer = false;
      _this.dataObject = {};
    },

    // 表格行被点击了
    async dbClickFn(row) {
      const _this = this;
      // 如果是下架就显示下架按钮
      if (row.status == 5) _this.isDown = false;
      let currentStatus = "",
        result = "",
        cuurentType = "";

      // 法规
      if (row.type == "法规") {
        currentStatus = "编辑格式";
        cuurentType = 1;
        result = JSON.parse(JSON.stringify(await getLawInfoApi(row.id)));
        // 头条
      } else if (row.type == "头条") {
        currentStatus = "查看内容";
        cuurentType = 2;
        result = JSON.parse(JSON.stringify(await getTopGetInfoInfoApi(row.id)));
        // 问答
      } else {
        currentStatus = "查看内容";
        cuurentType = 3;
        result = JSON.parse(JSON.stringify(await getQaGetInfoApi(row.id)));
        result.data.type = "问答";
      }

      if (result.code != 200) return;

      _this.dataObject = result.data;

      _this.drawerTitle = `${currentStatus}  ${row.type}`;
      _this.idType = cuurentType;
      _this.drawer = true;
    },
    // 编辑
    edit() {
      this.dialogFormVisible = true;
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      const _this = this;
      this.pageing.pageNum = pageNum;
      switch (_this.pageing.type1) {
        case "top":
          _this.getTopListFn();
          break;
        case "law":
          _this.getLawListFn();
          break;
        case "qa":
          _this.getQaListFn();
          break;
      }
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      const _this = this;

      _this.pageing.pageSize = pageSize;
      switch (_this.pageing.type1) {
        case "top":
          _this.getTopListFn();
          break;
        case "law":
          _this.getLawListFn();
          break;
        case "qa":
          _this.getQaListFn();
          break;
      }
    },
    getfilterParamsFn(tableList) {
      let s = new Set();
      for (let index = 0; index < tableList.length; index++) {
        s.add(tableList[index].type);
        // const element = tableList[index];
      }
      let arr = Array.from(s, (item) => {
        return {
          type: item,
        };
      });
      return getfilterParams(arr);
    },

    // 获取问答列表数据
    async getQaListFn() {
      const _this = this;
      let { code, data } = await getQaListApi(_this.pageing);
      if (code != 200) return;
      let tableList = JSON.parse(JSON.stringify(data.rows));
      tableList.forEach((item) => {
        item.type = "问答";
      });
      _this.tableList = tableList;
      _this.pageing.total = data.total;
    },
    inquireFn(paramsArr) {
      let { pageing } = this;
      // 筛选数据
      paramsArr.forEach((item) => {
        for (const key in item) {
          this.pageing[key] = item[key];
        }
      });
      console.log(this.pageing, "shangjia");
      this.isDown = true;
      if (this.pageing.type1 == "law") {
        this.idType = 1;
        this.getLawListFn();
      } else if (this.pageing.type1 == "top") {
        this.idType = 2;
        this.getTopListFn();
      } else if (this.pageing.type1 == "qa") {
        this.idType = 3;
        this.getQaListFn();
      }

      pageing.pageNum = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  ::v-deep .el-card {
    border-radius: 0;
    border: 0;
  }
  ::v-deep .el-tabs__nav-scroll {
    overflow: hidden;
    background: #ffffff;

    box-sizing: border-box;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
  }
  ::v-deep .el-tabs__item.is-active,
  ::v-deep .el-tabs__item:hover {
    color: #f97f2a;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}
::v-deep .el-drawer {
  padding: 0px 30px;
}
::v-deep .el-drawer__header {
  padding: 0px;
}
::v-deep .container .right {
  margin-top: 0px;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
  margin-top: 8px;
}
.content-box {
  display: flex;
  .table {
    flex: 1.5;
  }
  .edit-box {
    flex: 0.5;
  }
}
</style>